<template>
  <section>
    <!-- 面包屑 -->
      <breadcrumbs></breadcrumbs>
    <btns @exec="exec"></btns>
    <div class="data-container scroll-table">
      <div>
        <div class="ind-title lh50 f16">banner列表</div>
      </div>
      <el-table :data="tableData" style="width: 100%" row-key="dictId" border @selection-change="tableSelectionChange">
        <el-table-column type="selection" width="120"> </el-table-column>
        <el-table-column label="banner封面">
          <template width="90" slot-scope="scope">
            <img style="width:120px;height:120px;border:none;" :src="scope.row.bannerUrl" />
          </template>
        </el-table-column>
        <el-table-column label="位置" prop="bannerPosition">
          <template slot-scope="scope">
            <!-- { id: 1, label: "小程序首页轮播" },
        { id: 2, label: "小程序首页固定" },
        { id: 3, label: "pc端道德与法治" },
        { id: 4, label: "pc端主题教育" },
        { id: 5, label: "pc端成长与信仰" }, -->
            <p v-if="scope.row.bannerPosition == 1">
              小程序首页轮播
            </p>
            <p v-if="scope.row.bannerPosition == 2">
              小程序首页固定
            </p>
            <p v-if="scope.row.bannerPosition == 3">
              pc端道德与法治
            </p>
            <p v-if="scope.row.bannerPosition == 4">
              pc端主题教育
            </p>
            <p v-if="scope.row.bannerPosition == 5">
              pc端成长与信仰
            </p>
          </template>
        </el-table-column>
        <!-- { id: 2, label: "课程" },
        { id: 3, label: "新闻资讯" },
        { id: 4, label: "学术引领" },
        { id: 5, label: "培训" },
        { id: 6, label: "研修" }, -->
        <el-table-column prop="bannerType" label="类型">
          <template slot-scope="scope">
            <p v-if="scope.row.linkType == 2">
              课程
            </p>
            <p v-if="scope.row.linkType == 3">
              新闻资讯
            </p>
            <p v-if="scope.row.linkType == 4">
              学术引领
            </p>
            <p v-if="scope.row.linkType == 5">
              培训
            </p>
            <p v-if="scope.row.linkType == 6">
              研修
            </p>
          </template>
        </el-table-column>
        <el-table-column prop="bannerStatus" label="状态">
          <template slot-scope="scope">
            <p v-if="scope.row.bannerStatus == 0">
              禁用
            </p>
            <p v-if="scope.row.bannerStatus == 1">
              启用
            </p>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="排序" width="140" prop="bannerSort">

        </el-table-column>
        <el-table-column prop="addTime" label="上传时间"> </el-table-column>
      </el-table>

    </div>
    <div class="pages">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5, 10, 15, 20]"
                     :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
    <el-dialog title="添加banner信息" :visible.sync="dialogCreateFormVisible">
      <el-form :model="createForm" label-width="120px" ref="createForm" :rules="rules">
        <el-form-item label="位置" prop="bannerPosition">

          <el-select v-model="createForm.bannerPosition" placeholder="请选择banner位置">
            <el-option v-for="item in bannerList" :label="item.label" :value="item.id" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="排序" prop="bannerSort">
           <el-input v-model="createForm.bannerSort" placeholder="请输入排序序号"></el-input>
         </el-form-item> -->
        <!--  @change="showEdit" -->
        <el-form-item label="类型" prop="linkId">
          <div class="type-box">
            <el-select v-model="createForm.bannerType" @change="getLinkTypeList(1)" class="typeName-box">
              <el-option v-for="item in bannerTypeList" :label="item.label" :value="item.id" :key="item.label"></el-option>
            </el-select>
            <el-select v-model="createForm.linkId" placeholder="请选择banner类型" class="link-box">
              <el-option v-for="item in linkList" :label="item.title" :value="item.courseId" :key="item.title"></el-option>
            </el-select>
          </div>
        </el-form-item>
        <el-form-item label="banner排序" prop="bannerSort">
          <el-input v-model="createForm.bannerSort" maxlength="25" :min="0" type="number" show-word-limit autocomplete="off"></el-input>
          <!-- <el-input-number v-model="createForm.bannerSort" :min="1" label="描述文字"></el-input-number> -->
        </el-form-item>

        <el-form-item label="banner封面" prop="bannerUrl" :label-width="formLabelWidth" ref="bannerbox">
          <el-upload :action="importFileUrl" v-model="createForm.bannerUrl" list-type="picture-card" :before-upload="beforeAvatarUpload" :auto-upload="true"
                     :on-success="getUrl" :accept="'image/*'" :show-file-list="false">
            <img v-if="hasFile" :src="createAddfile" class="img-feng" alt="图片" />
            <i v-else class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <!-- <el-form-item label="banner详情" prop="" v-if="isShowEdit">
          <Editor ref="child" v-model="createForm.link" />
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogCreateFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addBanner('createForm')">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="修改banner信息" :visible.sync="dialogEditFormVisible">
      <el-form :model="EditForm" label-width="120px" ref="EditForm" :rules="rules">
        <el-form-item label="位置" prop="bannerPosition">
          <el-select v-model="EditForm.bannerPosition" placeholder="请选择banner位置" class="">
            <el-option v-for="item in bannerList" :label="item.label" :value="item.id" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="类型" prop="linkId">
          <div class="type-box">
            <el-select v-model="EditForm.bannerType" @change="getLinkTypeList(2)" class="typeName-box">
              <el-option v-for="item in bannerTypeList" :label="item.label" :value="item.id" :key="item.label"></el-option>
            </el-select>
            <el-select v-model="EditForm.linkId" placeholder="请选择banner类型" class="link-box">
              <el-option v-for="item in linkList" :label="item.title" :value="item.courseId" :key="item.courseId"></el-option>
            </el-select>
          </div>
        </el-form-item>

        <el-form-item label="banner排序" prop="isReferrer">
          <el-input v-model="EditForm.bannerSort" maxlength="25" type="number" show-word-limit autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="banner封面" prop="bannerUrl" :label-width="formLabelWidth">
          <el-upload :action="importFileUrl" v-model="EditForm.bannerUrl" list-type="picture-card" :before-upload="beforeAvatarUpload" :auto-upload="true"
                     :on-success="geEdittUrl" :accept="'image/*'" :show-file-list="false">
            <img v-if="EditAddfile" :src="EditAddfile" class="img-feng" alt="图片" />
            <i v-else class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <!-- <el-form-item label="banner详情"
                      prop="">
          <quill-editor v-model="EditForm.link" />
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogEditFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="editBanner('EditForm')">确 定</el-button>
      </div>
    </el-dialog>
  </section>
</template>
<script>
import btns from "@/components/btns.vue";
import Editor from "@/components/edit";
import breadcrumbs from "@/components/breadcrumbs.vue";
export default {
  components: {
    btns,
    Editor,
    breadcrumbs,
  },
  data() {
    var FengValidate = (rule, value, callback) => {
      // console.log(this.addfile);
      if (this.addfile == "") {
        callback(new Error("请选择封面图片"));
      }
      // if (value == null || value == '') {
      //   this.activeNames = ['2'];
      // }
    };
    return {
      Editlink: "",
      EditAddfile: "",
      createAddfile: "",
      hasFile: false,
      isShowGoodsListEdit: false,
      isShowProductListEdit: false,
      isShowFengEdit: false,
      isShowEditedit: false,
      EditForm: {},
      dialogEditFormVisible: false,
      isShowGoodsList: false,
      isShowProductList: false,
      isShowFeng: false,
      ProductList: [],
      GoodsList: [],
      isShow: false,
      Adaddfile: "",
      searchForm: { name: "" },
      tableData: [],
      currentPage: 1,
      pageSize: 5,
      total: 0,
      linkList: [],
      dialogCreateFormVisible: false,
      createForm: {
        bannerSort: 0,
        bannerUrl: ""
      },
      formLabelWidth: "120px",
      addfile: "",
      importFileUrl: this.GLOBAL.imgBaseUrl,
      isShowEdit: false,
      bannerList: [
        { id: 1, label: "小程序首页轮播" },
        { id: 2, label: "小程序首页固定" },
        { id: 3, label: "pc端道德与法治" },
        { id: 4, label: "pc端主题教育" },
        { id: 5, label: "pc端成长与信仰" },
      ],
      bannerTypeList: [
        { id: 2, label: "课程" },
        { id: 3, label: "新闻资讯" },
        { id: 4, label: "学术引领" },
        { id: 5, label: "培训" },
        { id: 6, label: "研修" },
      ],
      rules: {
        // name: [
        //   { required: true, message: '请输入banner名称', trigger: 'blur' },
        //   // { validator: allNumValidate, trigger: 'blur' }
        // ],
        bannerPosition: [
          { required: true, message: "请选择banner位置", trigger: "change" },
          // { validator: allNumValidate, trigger: 'blur' }
        ],
        bannerType: [
          { required: true, message: "请选择banner类型", trigger: "change" },
          // { validator: allNumValidate, trigger: 'blur' }
        ],
        bannerUrl: [
          { required: true, message: "请上传banner图片", trigger: 'change' },
          // { validator: allNumValidate, trigger: 'blur' }
        ],
        bannerSort: [
          { required: true, message: '请输入banner排序', trigger: 'blur' },
          // { validator: FengValidate, trigger: "blur" },
        ],
        linkId: [
          { required: true, message: "请选择banner类型", trigger: "change" },
          // { validator: allNumValidate, trigger: 'blur' }
        ],
        productList: [
          { required: true, message: "请选择商家", trigger: "change" },
          // { validator: allNumValidate, trigger: 'blur' }
        ],
        goodsList: [
          { required: true, message: "请选择商品", trigger: "change" },
          // { validator: allNumValidate, trigger: 'blur' }
        ],
      },
    };
  },
  created() {
    this.getList(this.currentPage, this.pageSize);
    // this.getGoodsList();
    // this.getProductList();
  },
  methods: {
    //启用
    enable() {
      if (this.tableSelection.length != 1) {
        this.$message.error("请选中一行数据");
        return;
      }
      this.$confirm("确认要启用这条banner, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$api.banner
            .updateState({
              bannerIds: this.tableSelection[0].bannerId,
              status: 1, //状态 0禁用 1启用
            })
            .then((d) => {
              if (d.code == 200) {
                this.$message({
                  type: "success",
                  message: "启用成功",
                });
                this.getList(this.currentPage, this.pageSize);
              } else {
                this.$message.error(d.msg);
              }
            });
        })
        .catch(() => {
          this.$message.info("已取消启用");
        });
    },
    //禁用
    disable() {
      if (this.tableSelection.length != 1) {
        this.$message.error("请选中一行数据");
        return;
      }
      this.$confirm("确认要禁用这条banner, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$api.banner
            .updateState({
              bannerIds: this.tableSelection[0].bannerId,
              status: 0, //状态 0禁用 1启用
            })
            .then((d) => {
              if (d.code == 200) {
                this.$message({
                  type: "success",
                  message: "禁用成功",
                });
                this.getList(this.currentPage, this.pageSize);
              } else {
                this.$message.error(d.msg);
              }
            });
        })
        .catch(() => {
          this.$message.info("已取消禁用");
        });
    },
     (index) {
      console.log(this.createForm)
      let currType;
      if (index == 1) {
        currType = this.createForm.bannerType
      } else if (index == 2) {
        currType = this.EditForm.bannerType
      }
      this.linkList = [];
      this.$api.banner
        .getLinklistByType({
          type: currType
        })
        .then((d) => {
          if (d.code == 200) {
            this.EditForm.linkId='';
            this.createForm.linkId='';
            // console.log(currType,typeof currType,'[3,4].includes(currType)',[3,4].includes(currType))
            if([3,4].includes(currType)){
              this.linkList = d.data.map(e=>{
                return {
                  courseId:e.epArticleId,
                  title:e.title
                }
              });
            }else if([5,6].includes(currType)){
              this.linkList = d.data.map(e=>{
                return {
                  courseId:e.trainId,
                  title:e.title
                }
              });
            }else{
              this.linkList = d.data;
            }
            // this.$set(this.createForm, "linkId", "")
            // console.log(d)
            // this.$message.success("编辑banner信息成功");
          } else {
            this.$message.error(d.msg);
          }
        });
    },
    getLinklistByType(type) {

    },
    editBanner(formName) {
      console.log(this.EditForm)
      this.$api.banner
        .updateBanner({
          bannerId: this.EditForm.bannerId,
          bannerPosition: this.EditForm.bannerPosition,
          link: this.EditForm.linkId,
          bannerSort: this.EditForm.bannerSort,
          bannerUrl: this.EditForm.bannerUrl,
          linkType: this.EditForm.bannerType
        })
        .then((d) => {
          if (d.code == 200) {
            this.$message.success("编辑banner信息成功");
            this.getList(this.currentPage, this.pageSize);
            //  this.$refs.child.clearText();
            this.dialogEditFormVisible = false;
          } else {
            this.$message.error(d.msg);
          }
        });

    },

    geEdittUrl(item) {
      // this.EditAddfile = item.data.url;
      this.EditAddfile = item;
      this.EditForm.bannerUrl = item;
      // console.log(this.Adaddfile);
      this.$message({
        type: "success",
        message: "图片上传成功",
      });
    },
    getProductList() {
      this.$api.store
        .getStoreList({
          pageno: 1,
          pagesize: 200,
        })
        .then((d) => {
          if (d.code == 1) {
            this.ProductList = d.data;
          }
        });
    },
    getGoodsList() {
      this.$api.goods.getStoreGoodsList().then((d) => {
        if (d.code == 1) {
          d.data.forEach((item) => {
            if (item.enable == 1) {
              this.GoodsList.push(item);
            }
          });

          // this.GoodsList = d.data;
        }
      });
    },
    getList(curr, page) {
      this.$api.banner
        .selectList({
          current: curr,
          size: page,
        })
        .then((d) => {
          if (d.code == 200) {
            this.tableData = d.data;
            this.total = d.totalCount;
            // console.log(d.data);
            d.data.forEach((item) => {
              if (item.site == 1) {
                item.region = "首页banner";
              } else if (item.site == 2) {
                item.region = "商城banner";
              }
              if (item.type == 1) {
                item.sType = "商品";
              } else if (item.type == 2) {
                item.sType = "商家";
              } else if (item.type == 3) {
                item.sType = "详情";
              }
              if (item.state == 1) {
                item.enable = "启用";
              } else if (item.state == 0) {
                item.enable = "禁用";
              }
            });
          }
        });
    },
    getUrlAd(item) {
      this.createForm.addfile = item;
      // console.log(item);
      this.isShow = true;
      // console.log(this.Adaddfile);
      this.$message({
        type: "success",
        message: "图片上传成功",
      });
      // console.log(this.editimg);
    },
    showEdit() {
      if (this.createForm.bannerType == 1) {
        this.isShowEdit = false;
        this.isShowGoodsList = true;
        this.isShowProductList = false;
        this.isShowFeng = true;
      } else if (this.createForm.bannerType == 2) {
        this.isShowGoodsList = false;
        this.isShowEdit = false;
        this.isShowFeng = true;
        this.isShowProductList = true;
      } else if (this.createForm.bannerType == 3) {
        this.isShowGoodsList = false;
        this.isShowEdit = true;
        this.isShowFeng = true;
        this.isShowProductList = false;
      }
    },
    showEditType() {
      // console.log(this.EditForm.type);
      if (this.EditForm.type == 1) {
        this.isShowEditedit = false;
        this.isShowGoodsListEdit = true;
        this.isShowProductListEdit = false;
        this.isShowFengEdit = true;
      } else if (this.EditForm.type == 2) {
        this.isShowGoodsListEdit = false;
        this.isShowEditedit = false;
        this.isShowFengEdit = true;
        this.isShowProductListEdit = true;
      } else if (this.EditForm.type == 3) {
        this.isShowGoodsListEdit = false;
        this.isShowEditedit = true;
        this.isShowFengEdit = false;
        this.isShowProductListEdit = false;
      }
    },
    addBanner(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$api.banner.addBanner({
            bannerPosition: this.createForm.bannerPosition,
            bannerSort: this.createForm.bannerSort,
            bannerUrl: this.createForm.bannerUrl,
            bannerType: this.createForm.bannerType,
            link: this.createForm.linkId,
            linkType: this.createForm.bannerType
          }).then((d) => {
            if (d.code == 200) {
              this.dialogCreateFormVisible = false;
              this.$message.success("banner添加成功");
              // this.$refs.child.clearText();
              this.hasFile = false;
              this.ccreateForm = {};
              this.createAddfile = "";
              this.getList(this.currentPage, this.pageSize);
            } else {
              this.$message.error(d.msg);
            }
          });
        }
      })
    },
    clearText() {
      this.content = "";
    },
    beforeAvatarUpload(file) {
      console.log(file, 231232)
      const isLt2M = file.size / 1024 / 1024 < 10;
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 10MB!');
      }
      return isLt2M;
    },
    getUrl(item) {
      this.hasFile = true;
      // console.log(this.addfile);
      // this.addfile = item.data.url;
      this.createForm.bannerUrl = item;
      // this.$refs.bannerbox.clearValidate();
      this.createAddfile = item;
      // console.log(item);
      // this.isShow = true;
      this.$message({
        type: "success",
        message: "图片上传成功",
      });
      // console.log(this.editimg);
    },
    //打开新增模态框
    add() {



      this.createForm = {
        "bannerType": '',
        "bannerPosition": '',
        "bannerUrl": '',
        "link": '',
        "linkType": '',

      }

      this.isShowGoodsList = false;
      this.isShowEdit = false;
      this.isShowFeng = false;
      this.isShowProductList = false;


      this.dialogCreateFormVisible = true;
    },
    //打开编辑模态框
    update() {
      if (this.tableSelection.length != 1) {
        this.$message.error("请选中一行数据");
        return;
      }
      this.linkList = [];
      let currType = this.tableSelection[0].linkType;
      this.$api.banner
        .getLinklistByType({
          type: currType
        })
        .then((d) => {
          if (d.code == 200) {
            this.linkList = d.data;
            // this.$set(this.createForm, "linkId", "")
            // console.log(d)
            // this.$message.success("编辑banner信息成功");
          } else {
            this.$message.error(d.msg);
          }
        });
      // this.$refs.child.clearText();
      console.log(typeof this.tableSelection[0].link)
      this.EditForm = {
        bannerPosition: this.tableSelection[0].bannerPosition,
        linkId: Number(this.tableSelection[0].link),
        bannerId: this.tableSelection[0].bannerId,
        bannerType: this.tableSelection[0].linkType,
        bannerUrl: this.tableSelection[0].bannerUrl,
        bannerSort: this.tableSelection[0].bannerSort,
      };
      this.EditAddfile = this.tableSelection[0].bannerUrl;
      this.Editlink = this.tableSelection[0].link,
        console.log("this.Editlink============================" + this.Editlink)


      // console.log(12312312312, this.EditForm);
      this.dialogEditFormVisible = true;
    },
    //删除数据
    del() {
      if (this.tableSelection.length != 1) {
        this.$message.error('请选中一行数据');
        return
      }
      this.$confirm("确认要删除这条banner, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$api.banner
            .updateState({
              bannerIds: this.tableSelection[0].bannerId,
              status: -1, //状态 0禁用 1启用
            })
            .then((d) => {
              if (d.code == 200) {
                this.$message({
                  type: "success",
                  message: "删除成功",
                });
                this.getList(this.currentPage, this.pageSize);
              } else {
                this.$message.error(d.msg);
              }
            });
        })
        .catch(() => {
          this.$message.info("已取消删除");
        });
    },
    search() { },
    handleReset() {
      this.$refs.searchForm.resetFields();
      this.search();
    },
    exec(fun) {
      if (this[fun]) {
        this.funTit = fun;
        this[fun]();
      } else {
        this.$message.error("方法未定义");
      }
    },
    tableSelectionChange(val) {
      this.tableSelection = val;
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getList(this.currentPage, val);
      // eslint-disable-next-line no-console
      // console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getList(val, this.pageSize);
      // eslint-disable-next-line no-console
      // console.log(`当前页: ${val}`);
    },
  },
};
</script>

<style lang="scss" scoped>
.type-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.link-box {
  width: 79%;
}
.typeName-box {
  width: 20%;
}
.dialog-footer {
  margin-top: 50px;
}
.img-feng {
  width: 120px;
  height: 120px;
}
.goods {
  width: 500px;
}
.icon {
  display: flex;
  justify-content: space-between;
  i {
    font-size: 25px;
  }
}
</style>
